<template>
  <!--     @ok="handleOk" -->
  <j-modal
    title="物料订单详情"
    :width="1600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
    destroyOnClose
  >
    <div style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700">详细信息</div>
    <div style="display: flex; justify-content: left">
      <table width="80%">
        <tr>
          <td class="td-title">技师昵称</td>
          <td class="td-main">{{ model.coachName }}</td>
          <td class="td-title">技师照片</td>
          <td class="td-main">
            <j-image-upload text="上传" disabled v-model="model.workImg"></j-image-upload>
          </td>
        </tr>
        <tr>
          <td class="td-title">订单号</td>
          <td class="td-main">{{ model.orderNo }}</td>
          <td class="td-title">支付状态</td>
          <td class="td-main">{{ options[model.payStatus] }}</td>
        </tr>

        <tr>
          <td class="td-title">订单总金额</td>
          <td class="td-main">{{ model.totalAmount }}</td>
          <td class="td-title">支付方式</td>
          <td class="td-main">{{ this.customRender(model.payType) }}</td>
        </tr>

        <tr>
          <td class="td-title">配送方式</td>
          <td class="td-main">
            <span v-if="model.getType == 0">到店自提</span>
            <span v-else>快递配送</span>
          </td>
          <td class="td-title">创建时间</td>
          <td class="td-main">{{ model.createTime }}</td>
        </tr>

        <tr>
          <td class="td-title">物料状态</td>
          <td class="td-main">{{ this.orderStatusChange(model) }}</td>
          <td class="td-title" v-if="model.payStatus == 1">支付时间</td>
          <td class="td-title" v-if="model.payStatus == 4">退款时间</td>
          <td class="td-main" v-if="model.payStatus == 1">{{ model.payTime }}</td>
          <!-- <td class="td-main" v-if="model.payStatus == 4">字段后端修改</td> -->
        </tr>
        <tr>
          <td class="td-title" v-if="model.payStatus == 4">退款金额</td>
          <td class="td-main" v-if="model.payStatus == 4">{{ model.orderRefundAmount }}</td>
        </tr>
      </table>
    </div>

    <div style="border-left: 4px solid #397de3; padding-left: 10px; margin: 15px 0; font-weight: 700">物料信息</div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="orderServerList"
      :pagination="false"
      class="j-table-force-nowrap"
    >
      <template slot="goodsImg" slot-scope="text, record">
        <img :src="record.goodsImg" alt="" style="height: 80px; width: 80px" />
      </template>
    </a-table>

    <a-spin :spinning="confirmLoading"> </a-spin>
  </j-modal>
</template>

<script>
import Area from '@/components/_util/Area'
import { getAction, getPhonePrivacyList } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'XhdjCoachInfoDialog',
  data () {
    return {
      xhdjBackOrderTrendsListVOS: [],

      options: {
        0: '待支付',
        1: '已支付',
        2: '已取消',
        3: '退款中',
        4: '已退款'
      },

      title: '操作',
      visible: false,
      model: {},
      addXhdjOrderInfoFrontListVO: [],
      orderServerList: [], //物料信息
      PhoneColumnsList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      coachId: '',
      paramsDate: {},

      columns: [
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '物料图片',
          dataIndex: 'goodsImg',
          scopedSlots: { customRender: 'goodsImg' }
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materielGoodsName'
        },
        {
          title: '价格',
          align: 'center',
          dataIndex: 'serviceAmount'
        },
        {
          title: '份数',
          align: 'center',
          dataIndex: 'serverNum'
        }
      ],

      confirmLoading: false,
      dataSource: [],
      validatorRules: {},
      user: {},
      url: {
        backQueryByIdDetail: '/order/xhdjAppCoachOrder/backQueryByIdDetail',
        backPhonePrivacyList: '/order/xhdjAppCoachOrder/backPhonePrivacyList'
      }
    }
  },
  created () {
    this.all = new Area().all
    this.allList = this.all.filter(res => res.index == 1)
  },
  methods: {
    customRender (record) {
      switch (record) {
        case 1:
          return '会员余额'
          break
        case 2:
          return '支付宝'
          break
        case 3:
          return '微信APP(商户备用)'
          break
        case 4:
          return '微信公众号(商户备用)'
          break
        case 5:
          return '微信公众号(商户备用)'
          break
        case 6:
          return '微信公众号(商户备用)'
          break
        case 7:
          return '微信公众号(商户1674799970)'
          break
      }
    },

    orderStatusChange (record) {
      if (record.orderStatus === 0 && record.getType === 0) {
        return '待取货'
      }
      if (record.orderStatus === 0 && record.getType != 0) {
        return '待发货'
      }
      if (record.orderStatus === 1) {
        return '待收货'
      }
      return '已完成'
    },

    add () {
      //初始化默认值
      this.edit({})
    },
    edit (res) {
      console.log(res, '详情页面的谁就')
      this.model = res
      this.orderServerList = res.goodsDetaiList
      this.visible = true
    },
    close () {
      this.model = {}
      this.orderServerList = []
      this.$emit('close')
      this.visible = false
    },

    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.td-title {
  background-color: rgb(230, 247, 255);
  min-height: 30px;
  text-align: right;
  padding: 7px;
  width: 17%;
}
.td-main {
  min-height: 30px;
  padding: 7px;
  width: 33%;
}
.font-red {
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
